Konfigurasi TypeScript: Menguasai Opsi Kompiler TSConfig

File tsconfig.json adalah jantung dari setiap proyek TypeScript. File ini menentukan bagaimana kompiler TypeScript (tsc) mengubah file .ts Anda menjadi JavaScript. tsconfig.json yang terkonfigurasi dengan baik sangat penting untuk menjaga kualitas kode, memastikan kompatibilitas di berbagai lingkungan, dan mengoptimalkan proses build. Panduan komprehensif ini menyelami opsi tsconfig.json lanjutan, memberdayakan Anda untuk menyempurnakan proyek TypeScript Anda untuk kinerja dan pemeliharaan puncak.

Memahami Dasar-dasarnya: Mengapa TSConfig Penting

Sebelum kita mendalami opsi lanjutan, mari kita tinjau kembali mengapa tsconfig.json sangat penting:

• Kontrol Kompilasi: Ini menentukan file mana yang harus disertakan dalam proyek Anda dan bagaimana file tersebut harus dikompilasi.
• Pemeriksaan Tipe: Ini mendefinisikan aturan dan ketelitian pemeriksaan tipe, membantu Anda menangkap kesalahan lebih awal dalam siklus pengembangan.
• Kontrol Output: Ini menentukan versi JavaScript target, sistem modul, dan direktori output.
• Integrasi IDE: Ini memberikan informasi berharga ke IDE (seperti VS Code, WebStorm, dll.) untuk fitur-fitur seperti penyelesaian kode, penyorotan kesalahan, dan refactoring.

Tanpa file tsconfig.json, kompiler TypeScript akan menggunakan pengaturan default, yang mungkin tidak cocok untuk semua proyek. Ini dapat menyebabkan perilaku yang tidak terduga, masalah kompatibilitas, dan pengalaman pengembangan yang kurang optimal.

Membuat TSConfig Anda: Mulai Cepat

Untuk membuat file tsconfig.json, cukup jalankan perintah berikut di direktori root proyek Anda:

            tsc --init
            

              
                Copy
              
            
          

Ini akan menghasilkan file tsconfig.json dasar dengan beberapa opsi umum. Anda kemudian dapat menyesuaikan file ini untuk memenuhi kebutuhan spesifik proyek Anda.

Opsi Kompiler Utama: Tinjauan Rinci

File tsconfig.json berisi objek compilerOptions, di mana Anda mengkonfigurasi kompiler TypeScript. Mari kita jelajahi beberapa opsi yang paling penting dan umum digunakan:

target

Opsi ini menentukan versi ECMAScript target untuk kode JavaScript yang dikompilasi. Ini menentukan fitur JavaScript mana yang akan digunakan kompiler, memastikan kompatibilitas dengan lingkungan target (misalnya, browser, Node.js). Nilai umum termasuk ES5, ES6 (ES2015), ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext. Menggunakan ESNext akan menargetkan fitur ECMAScript terbaru yang didukung.

Contoh:

            "compilerOptions": {
  "target": "ES2020"
}
            

              
                Copy
              
            
          

Konfigurasi ini akan menginstruksikan kompiler untuk menghasilkan kode JavaScript yang kompatibel dengan ECMAScript 2020.

module

Opsi ini menentukan sistem modul yang akan digunakan dalam kode JavaScript yang dikompilasi. Nilai umum termasuk CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020, dan ESNext. Pilihan sistem modul bergantung pada lingkungan target dan pemuat modul yang digunakan (misalnya, Node.js, Webpack, Browserify).

Contoh:

            "compilerOptions": {
  "module": "CommonJS"
}
            

              
                Copy
              
            
          

Konfigurasi ini cocok untuk proyek Node.js, yang biasanya menggunakan sistem modul CommonJS.

lib

Opsi ini menentukan kumpulan file pustaka yang akan disertakan dalam proses kompilasi. File pustaka ini menyediakan definisi tipe untuk API JavaScript bawaan dan API peramban. Nilai umum termasuk ES5, ES6, ES7, DOM, WebWorker, ScriptHost, dan lainnya.

Contoh:

            "compilerOptions": {
  "lib": ["ES2020", "DOM"]
}
            

              
                Copy
              
            
          

Konfigurasi ini menyertakan definisi tipe untuk ECMAScript 2020 dan API DOM, yang penting untuk proyek berbasis peramban.

allowJs

Opsi ini memungkinkan kompiler TypeScript untuk mengompilasi file JavaScript bersama dengan file TypeScript. Ini bisa berguna saat memigrasikan proyek JavaScript ke TypeScript atau saat bekerja dengan basis kode JavaScript yang ada.

Contoh:

            "compilerOptions": {
  "allowJs": true
}
            

              
                Copy
              
            
          

Dengan opsi ini diaktifkan, kompiler akan memproses file .ts dan .js.

checkJs

Opsi ini mengaktifkan pemeriksaan tipe untuk file JavaScript. Saat dikombinasikan dengan allowJs, ini memungkinkan TypeScript untuk mengidentifikasi potensi kesalahan tipe dalam kode JavaScript Anda.

Contoh:

            "compilerOptions": {
  "allowJs": true,
  "checkJs": true
}
            

              
                Copy
              
            
          

Konfigurasi ini menyediakan pemeriksaan tipe untuk file TypeScript dan JavaScript.

jsx

Opsi ini menentukan bagaimana sintaks JSX (digunakan dalam React dan kerangka kerja lainnya) harus ditransformasi. Nilai umum termasuk preserve, react, react-native, dan react-jsx. preserve membiarkan sintaks JSX apa adanya, react mengubahnya menjadi panggilan React.createElement, react-native adalah untuk pengembangan React Native, dan react-jsx mengubahnya menjadi fungsi pabrik JSX. react-jsxdev adalah untuk tujuan pengembangan.

Contoh:

            "compilerOptions": {
  "jsx": "react"
}
            

              
                Copy
              
            
          

Konfigurasi ini cocok untuk proyek React, mengubah JSX menjadi panggilan React.createElement.

declaration

Opsi ini menghasilkan file deklarasi (.d.ts) untuk kode TypeScript Anda. File deklarasi menyediakan informasi tipe untuk kode Anda, memungkinkan proyek TypeScript lain atau proyek JavaScript untuk menggunakan kode Anda dengan pemeriksaan tipe yang tepat.

Contoh:

            "compilerOptions": {
  "declaration": true
}
            

              
                Copy
              
            
          

Konfigurasi ini akan menghasilkan file .d.ts di samping file JavaScript yang dikompilasi.

declarationMap

Opsi ini menghasilkan file peta sumber (.d.ts.map) untuk file deklarasi yang dihasilkan. Peta sumber memungkinkan debugger dan alat lain untuk memetakan kembali ke kode sumber TypeScript asli saat bekerja dengan file deklarasi.

Contoh:

            "compilerOptions": {
  "declaration": true,
  "declarationMap": true
}
            

              
                Copy
              
            
          

sourceMap

Opsi ini menghasilkan file peta sumber (.js.map) untuk kode JavaScript yang dikompilasi. Peta sumber memungkinkan debugger dan alat lain untuk memetakan kembali ke kode sumber TypeScript asli saat debugging di peramban atau lingkungan lain.

Contoh:

            "compilerOptions": {
  "sourceMap": true
}
            

              
                Copy
              
            
          

outFile

Opsi ini menggabungkan dan mengeluarkan semua file output menjadi satu file. Ini biasanya digunakan untuk bundling kode untuk aplikasi berbasis peramban.

Contoh:

            "compilerOptions": {
  "outFile": "dist/bundle.js"
}
            

              
                Copy
              
            
          

outDir

Opsi ini menentukan direktori output untuk file JavaScript yang dikompilasi. Jika tidak ditentukan, kompiler akan menempatkan file output di direktori yang sama dengan file sumber.

Contoh:

            "compilerOptions": {
  "outDir": "dist"
}
            

              
                Copy
              
            
          

Konfigurasi ini akan menempatkan file JavaScript yang dikompilasi di direktori dist.

rootDir

Opsi ini menentukan direktori root proyek TypeScript. Kompiler menggunakan direktori ini untuk menyelesaikan nama modul dan menghasilkan jalur file output. Ini sangat berguna untuk struktur proyek yang kompleks.

Contoh:

            "compilerOptions": {
  "rootDir": "src"
}
            

              
                Copy
              
            
          

removeComments

Opsi ini menghapus komentar dari kode JavaScript yang dikompilasi. Ini dapat membantu mengurangi ukuran file output.

Contoh:

            "compilerOptions": {
  "removeComments": true
}
            

              
                Copy
              
            
          

noEmitOnError

Opsi ini mencegah kompiler mengeluarkan file JavaScript jika ada kesalahan tipe yang terdeteksi. Ini memastikan bahwa hanya kode yang valid yang dihasilkan.

Contoh:

            "compilerOptions": {
  "noEmitOnError": true
}
            

              
                Copy
              
            
          

strict

Opsi ini mengaktifkan semua opsi pemeriksaan tipe ketat. Ini sangat direkomendasikan untuk proyek baru karena membantu menangkap potensi kesalahan dan memberlakukan praktik terbaik.

Contoh:

            "compilerOptions": {
  "strict": true
}
            

              
                Copy
              
            
          

Mengaktifkan mode ketat setara dengan mengaktifkan opsi berikut:

• noImplicitAny
• noImplicitThis
• alwaysStrict
• strictNullChecks
• strictFunctionTypes
• strictBindCallApply
• noImplicitReturns
• noFallthroughCasesInSwitch

esModuleInterop

Opsi ini mengaktifkan interoperabilitas antara modul CommonJS dan ES. Ini memungkinkan Anda untuk mengimpor modul CommonJS dalam modul ES dan sebaliknya.

Contoh:

            "compilerOptions": {
  "esModuleInterop": true
}
            

              
                Copy
              
            
          

forceConsistentCasingInFileNames

Opsi ini memberlakukan casing yang konsisten pada nama file. Ini penting untuk kompatibilitas lintas platform, karena beberapa sistem operasi peka huruf besar-kecil sementara yang lain tidak.

Contoh:

            "compilerOptions": {
  "forceConsistentCasingInFileNames": true
}
            

              
                Copy
              
            
          

baseUrl dan paths

Opsi ini memungkinkan Anda mengkonfigurasi resolusi modul. baseUrl menentukan direktori dasar untuk menyelesaikan nama modul non-relatif, dan paths memungkinkan Anda mendefinisikan alias modul kustom.

Contoh:

            "compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@components/*": ["src/components/*"],
    "@utils/*": ["src/utils/*"]
  }
}
            

              
                Copy
              
            
          

Konfigurasi ini memungkinkan Anda mengimpor modul menggunakan alias seperti @components/MyComponent dan @utils/myFunction.

Konfigurasi Lanjutan: Melampaui Dasar-dasarnya

Sekarang, mari kita jelajahi beberapa opsi tsconfig.json lanjutan yang dapat lebih meningkatkan pengalaman pengembangan TypeScript Anda.

Kompilasi Inkremental

TypeScript mendukung kompilasi inkremental, yang dapat secara signifikan mempercepat proses build untuk proyek besar. Untuk mengaktifkan kompilasi inkremental, atur opsi incremental ke true dan tentukan opsi tsBuildInfoFile.

Contoh:

            "compilerOptions": {
  "incremental": true,
  "tsBuildInfoFile": ".tsbuildinfo"
}
            

              
                Copy
              
            
          

Opsi tsBuildInfoFile menentukan file tempat kompiler akan menyimpan informasi build. Informasi ini digunakan untuk menentukan file mana yang perlu dikompilasi ulang selama build berikutnya.

Referensi Proyek

Referensi proyek memungkinkan Anda menstrukturkan kode Anda menjadi proyek yang lebih kecil dan lebih mudah dikelola. Ini dapat meningkatkan waktu build dan organisasi kode untuk basis kode besar. Analogi yang baik untuk konsep ini adalah arsitektur Microservice - setiap layanan independen, tetapi bergantung pada yang lain dalam ekosistem.

Untuk menggunakan referensi proyek, Anda perlu membuat file tsconfig.json terpisah untuk setiap proyek. Kemudian, dalam file tsconfig.json utama, Anda dapat menentukan proyek yang harus dirujuk menggunakan opsi references.

Contoh:

            {
  "compilerOptions": {
    ...
  },
  "references": [
    { "path": "./project1" },
    { "path": "./project2" }
  ]
}
            

              
                Copy
              
            
          

Konfigurasi ini menentukan bahwa proyek saat ini bergantung pada proyek yang terletak di direktori ./project1 dan ./project2.

Transformer Kustom

Transformer kustom memungkinkan Anda memodifikasi output kompiler TypeScript. Ini dapat digunakan untuk berbagai tujuan, seperti menambahkan transformasi kode kustom, menghapus kode yang tidak terpakai, atau mengoptimalkan output untuk lingkungan tertentu. Transformer ini sering digunakan untuk tugas-tugas internasionalisasi dan lokalisasi (i18n).

Untuk menggunakan transformer kustom, Anda perlu membuat file JavaScript terpisah yang mengekspor fungsi yang akan dipanggil oleh kompiler. Kemudian, Anda dapat menentukan file transformer menggunakan opsi plugins dalam file tsconfig.json.

Contoh:

            {
  "compilerOptions": {
    ...
    "plugins": [
      { "transform": "./transformer.js" }
    ]
  }
}
            

              
                Copy
              
            
          

Konfigurasi ini menentukan bahwa file ./transformer.js harus digunakan sebagai transformer kustom.

Files, Include, dan Exclude

Selain compilerOptions, opsi tingkat root lainnya di tsconfig.json mengontrol file mana yang disertakan dalam proses kompilasi:

• files: Array jalur file yang akan disertakan dalam kompilasi.
• include: Array pola glob yang menentukan file yang akan disertakan.
• exclude: Array pola glob yang menentukan file yang akan dikecualikan.

Opsi ini memberikan kontrol terperinci atas file mana yang diproses oleh kompiler TypeScript. Misalnya, Anda dapat mengecualikan file pengujian atau kode yang dihasilkan dari proses kompilasi.

Contoh:

            {
  "compilerOptions": { ... },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.spec.ts"]
}
            

              
                Copy
              
            
          

Konfigurasi ini menyertakan semua file di direktori src dan subdirektorinya, sambil mengecualikan file di direktori node_modules dan dist, serta file apa pun dengan ekstensi .spec.ts (biasanya digunakan untuk pengujian unit).

Opsi Kompiler untuk Skenario Spesifik

Proyek yang berbeda mungkin memerlukan pengaturan kompiler yang berbeda untuk mencapai hasil yang optimal. Mari kita lihat beberapa skenario spesifik dan pengaturan kompiler yang direkomendasikan untuk masing-masing.

Pengembangan Aplikasi Web

Untuk pengembangan aplikasi web, Anda biasanya akan menggunakan pengaturan kompiler berikut:

            {
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
            

              
                Copy
              
            
          

Pengaturan ini cocok untuk aplikasi web modern yang menggunakan React atau kerangka kerja serupa. Mereka menargetkan fitur ECMAScript terbaru, menggunakan modul ES, dan mengaktifkan pemeriksaan tipe ketat.

Pengembangan Backend Node.js

Untuk pengembangan backend Node.js, Anda biasanya akan menggunakan pengaturan kompiler berikut:

            {
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "esModuleInterop": true,
    "strict": true,
    "sourceMap": true,
    "outDir": "dist",
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
            

              
                Copy
              
            
          

Pengaturan ini cocok untuk aplikasi Node.js yang menggunakan sistem modul CommonJS. Mereka menargetkan fitur ECMAScript terbaru, mengaktifkan pemeriksaan tipe ketat, dan memungkinkan Anda mengimpor file JSON sebagai modul.

Pengembangan Pustaka

Untuk pengembangan pustaka, Anda biasanya akan menggunakan pengaturan kompiler berikut:

            {
  "compilerOptions": {
    "target": "ES5",
    "module": "UMD",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}
            

              
                Copy
              
            
          

Pengaturan ini cocok untuk membuat pustaka yang dapat digunakan di lingkungan peramban dan Node.js. Mereka menghasilkan file deklarasi dan peta sumber untuk pengalaman pengembang yang lebih baik.

Praktik Terbaik untuk Manajemen TSConfig

Berikut adalah beberapa praktik terbaik yang perlu diingat saat mengelola file tsconfig.json Anda:

• Mulai dengan konfigurasi dasar: Buat file tsconfig.json dasar dengan pengaturan umum dan kemudian perluas di proyek lain menggunakan opsi extends.
• Gunakan mode ketat: Aktifkan mode ketat untuk menangkap potensi kesalahan dan memberlakukan praktik terbaik.
• Konfigurasi resolusi modul: Konfigurasikan resolusi modul dengan benar untuk menghindari kesalahan impor.
• Gunakan referensi proyek: Strukturkan kode Anda menjadi proyek yang lebih kecil dan lebih mudah dikelola menggunakan referensi proyek.
• Jaga agar file tsconfig.json Anda tetap mutakhir: Tinjau file tsconfig.json Anda secara teratur dan perbarui seiring evolusi proyek Anda.
• Kontrol versi file tsconfig.json Anda: Komit file tsconfig.json Anda ke kontrol versi bersama dengan kode sumber Anda yang lain.
• Dokumentasikan konfigurasi Anda: Tambahkan komentar ke file tsconfig.json Anda untuk menjelaskan tujuan setiap opsi.

Kesimpulan: Menguasai Konfigurasi TypeScript

File tsconfig.json adalah alat yang ampuh untuk mengkonfigurasi kompiler TypeScript dan mengontrol proses build. Dengan memahami opsi yang tersedia dan mengikuti praktik terbaik, Anda dapat menyempurnakan proyek TypeScript Anda untuk kinerja, pemeliharaan, dan kompatibilitas yang optimal. Panduan ini telah memberikan gambaran umum yang komprehensif tentang opsi lanjutan yang tersedia di file tsconfig.json, memberdayakan Anda untuk sepenuhnya mengendalikan alur kerja pengembangan TypeScript Anda. Ingatlah untuk selalu merujuk ke dokumentasi resmi TypeScript untuk informasi dan panduan terbaru. Seiring evolusi proyek Anda, begitu pula pemahaman dan pemanfaatan alat konfigurasi yang ampuh ini. Selamat mengkode!